<template>
  <div >
    <!-- 弹窗 -->
    <el-dialog
      title="温馨提示"
      :visible.sync="centerDialogVisible"
      width="30%"
      modal
      >
      <span>欢迎使用FBook后台管理系统，目前本系统正处于开发阶段....</span>
      <span slot="footer" class="dialog-footer" style="text-align: end;">
        <el-button type="primary" @click="centerDialogVisible = false">知道了</el-button>
      </span>
    </el-dialog>


    <el-container>
      <el-header>
        <logo/>
      </el-header>
      <!-- 普通博主 -->
      <el-container :style="[conterStyle]">
        <el-aside :style="[aslidStyle]">
          <!-- 菜单 -->
          <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
            <el-radio-button :label="false">展开</el-radio-button>
            <el-radio-button :label="true">收起</el-radio-button>
          </el-radio-group>
          <!-- :router=true -->
          <el-menu default-active="/user/card" class="el-menu-vertical-demo" collapse='true' :router=true @open="handleOpen" @close="handleClose" :collapse="isCollapse" @select="backIndex">

            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-user-solid"></i>
                <span slot="title">个人中心</span>
              </template>
              <el-menu-item-group>
                <span slot="title">个人资料</span>
                <el-menu-item index="/user/card"><i class="el-icon-user-solid" ></i>资料卡片</el-menu-item>
                <el-menu-item index="/user/fans"><i class="iconfont ">&#xe615;</i>&nbsp;我的粉丝</el-menu-item>
                <el-menu-item index="/user/focus"><i class="el-icon-star-off"></i>我的关注</el-menu-item>
              </el-menu-item-group>
            </el-submenu>


            <!-- 博文管理 -->
            <el-submenu index="2">
              <template slot="title">
                <i class="iconfont icon-sty">&#xe612;</i>
                <span slot="title">博客管理</span>
              </template>
              <el-menu-item-group title="博文管理">
                <el-menu-item index="/article/list"><i class="el-icon-s-unfold"></i>博文管理</el-menu-item>
                <el-menu-item index="/article/release"><i class="el-icon-s-promotion"></i>发布博文</el-menu-item>
                <el-menu-item index="/article/collect"><i class="iconfont icon-sty">&#xe60c;</i>我的收藏</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <!-- 评论管理 -->
            <el-submenu index="3">
              <template slot="title">
                <i class="iconfont icon-sty">&#xe6ae;</i>
                <span slot="title">评论管理</span>
              </template>
              <el-menu-item-group title="评论管理">
                <el-menu-item index="/commont/release"><i class="iconfont icon-sty">&#xe628;</i>发布的评论</el-menu-item>
                <el-menu-item index="/commont/recive"><i class="iconfont icon-sty">&#xe626;</i>收到的评论</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <!-- 超级管理员才展示 -->
            <el-submenu index="4" v-show="this.UserInfo.id == '1'">
              <template slot="title">
                <i class="iconfont icon-sty">&#xe6ae;</i>
                <span slot="title">系统管理中心</span>
              </template>
              <el-menu-item-group title="用户管理">
                <el-menu-item index="/manager/userList"><i class="iconfont icon-sty">&#xe628;</i>用户列表</el-menu-item>
                <el-menu-item index="/manager/loggerList"><i class="iconfont icon-sty">&#xe626;</i>日志列表</el-menu-item>
              </el-menu-item-group>
            </el-submenu>


            <!-- 注销登录 -->
            <el-menu-item index="/login/out">
              <i class="el-icon-circle-close"></i>
              <span slot="title">注销登录</span>
            </el-menu-item>


          </el-menu>
        </el-aside>
        <el-main :style="{border:'1px solid #F2F6FC'}">
          <router-view style="width: 99%;"></router-view>
        </el-main>
      </el-container>

      <!-- 超级管理员 -->

      <el-footer>
        <center-footer></center-footer>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
  import Logo from '../common/header.vue'
  import mixins from "../../mixins.js"
  import CenterFooter from '../common/footer.vue'
  import Info from './components/info.vue'
  import CreateArticle from './components/createArticle.vue'
  import ArticleList from './components/articleList.vue'
  export default{
    mixins:[mixins],
    data(){
      return{
        centerDialogVisible: false,
        conterStyle:{
          margin: '0 auto',
          width: 100+'%',
        },
        aslidStyle:{
          // width:10+'%',
          minWidth:200+'px',
          maxWidth:201+'px',
        },
        showNum:'1-1',
        isCollapse: false
      }
    },
    methods:{
      handleOpen(key, keyPath) {
        console.log("handleOpen"+key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log("handleClose"+key, keyPath);
      },
      backIndex(index,indexPath){
        console.log("backIndex"+index, indexPath);
        this.showNum = index

        //如果是注销登陆
        if(index === '/login/out'){
          this.$confirm('确定注销登陆?', '温馨提示',{
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$message({
              type: 'success',
              message: '成功注销!',
              center: true,
            });
            //删除本地UserInfo
            localStorage.removeItem("Authorization")
            localStorage.removeItem("UserInfo")
            this.$router.push({
              path:"/"
            })
            this.$router.go(0)
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消',
              center: true
            });
            this.$router.push({
              path:'/user/card'
            })
          })
        }
      },
      changeTable(index){
        this.showNum=index
        if(index === '1'){
          this.$router.push({
            path:'/user/center'
          })
        }
        if(index === '2'){
          this.$router.push({
            path:'/article/release'
          })
        }
        if(index === '3'){
          this.$router.push({
            path:'/article/list'
          })
        }
        //如果是注销登陆
        if(index === '4'){
          this.$confirm('确定注销登陆?', '温馨提示',{
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$message({
              type: 'success',
              message: '成功注销!',
              center: true,
            });
            //删除本地UserInfo
            localStorage.removeItem("Authorization")
            localStorage.removeItem("UserInfo")
            this.$router.push({
              path:"/"
            })
            this.$router.go(0)
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消',
              center: true
            });
          })
        }
      },
    },
    components:{
      Logo,
      CenterFooter,
      Info,
      CreateArticle,
      ArticleList,
    },
    mounted() {
      var timer = setTimeout(() => {
        this.centerDialogVisible = true
        clearTimeout(timer)
      },1000)
    }
  }
</script>

<style scoped lang="less" >
  .el-footer{
    padding: 0;
  }
  .el-header{
    padding: 0;
  }
  .el-main {
    margin: 5px 0px;
    padding: 0;
    color: #333;
    height: 780px;
  }
  .el-aside{
    // width: 30%;
    margin: 5px 0px 5px 10px;
    /* background-color: #000000; */
  }
  .el-main div{
    width: 100%;
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
  .icon-sty{
    margin: 0 8px 0 5px;
  }
</style>
